<template>
  <div  :class="[sortType === 'column' ? 'searchContent2' : 'searchContent']" ref="content">
    <div :class="[!(sortType === 'column' || sortType === 'row') ? 'searchArea' : 'searchArea-max', 'searchInput']" ref="isMore" >
      <div class="item" v-for="item in searchList" :key="item.displayText">
        <label class="item-label">{{ item.displayText }}</label>
        <div class="item-input">
          <div :is="componentsName[item.controlType]" v-model="msg[item.filterFieldName]" @msgEvent="msgEvent" :data="item.data || []" :rows="sortType === 'column'? '3' : '1'"></div>
        </div>
      </div>
    </div>
    <div v-if="!(sortType === 'column' || sortType === 'row')" class="btnContent">
      <slot name="btns"></slot>
    </div>
    <div class="showMore" @click="showMore" @mouseover="onmouseover" @mouseout="onmouseout" v-if="!(sortType === 'column' || sortType === 'row')">
      <span v-if="textShow" class="text">{{ text }}</span>
      <i :class="[!flag? 'el-icon-caret-bottom' : 'el-icon-caret-top', textShow? 'blue' : 'gray']"></i>
    </div>
  </div>
</template>

<script>
import { formCollection, list } from './tools.js'
export default {
  name: 'search-content',
  components: {
    ...formCollection
  },
  props: {
    // 传入的搜索内容数组
    searchList: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 字段数组，传入querySetup组件tableData的值一样
    submitField: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 设置宽度需要写px或百分比
    width: {
      type: String,
      default: '100%'
    },
    // 设置内容宽度需要写px或百分比
    contentWidth: {
      type: String,
      default: '85%'
    },
    // 表单单列排列 column
    sortType: {
      type: String,
      default: ''
    }
  },
  watch: {
    searchList: {
      handler (val) {
        this.$nextTick(() => {
          if (this.flag) {
            let n = Math.ceil(this.$refs.isMore.childNodes.length / 3)
            this.$refs.isMore.style.height = 83 * n + 'px'
          }
        })
        this.submitField.map(item => {
          let flag = true
          val.map(value => {
            if (item.filterFieldName === value.filterFieldName) {
              flag = false
            }
          })
          if (flag) {
            if (this.componentsName[item.controlType] === 'elMultipleSelect' || this.componentsName[item.controlType] === 'elCheckbox' || this.componentsName[item.controlType] === 'elCascader') {
              this.msg[item.filterFieldName] = []
            } else {
              this.msg[item.filterFieldName] = ''
            }
          }
        })
      },
      deep: true
    }
  },
  created () {
    this.getComponentsName()
    // 初始化上传字段对象
    this.submitField.map(item => {
      if (this.componentsName[item.controlType] === 'elMultipleSelect' || this.componentsName[item.controlType] === 'elCheckbox' || this.componentsName[item.controlType] === 'elCascader') {
        this.msg[item.filterFieldName] = []
      } else {
        this.msg[item.filterFieldName] = ''
      }
    })
    this.$nextTick(() => {
      if (this.sortType === 'row') {
        let n = Math.ceil(this.$refs.isMore.childNodes.length / 3)
        this.$refs.isMore.style.height = 83 * n + 'px'
      }
    })
  },
  mounted () {
    // 设置组件宽度
    this.$refs.content.style.width = this.width
    if (this.sortType === 'column') {
      this.$refs.isMore.style.width = this.contentWidth
    }
    // 暴露上传字段对象
    this.$emit('param', this.msg)
  },
  data () {
    return {
      // tools组件文件中名称对应
      ...list,
      msg: {},
      flag: false,
      text: '展开更多',
      textShow: false,
      componentsName: {}
    }
  },
  methods: {
    msgEvent () {
      this.$emit('param', this.msg)
    },
    showMore () {
      this.flag = !this.flag
      if (this.flag) {
        let n = Math.ceil(this.$refs.isMore.childNodes.length / 3)
        this.$refs.isMore.style.height = 83 * n + 'px'
      } else {
        this.$refs.isMore.style.height = '83px'
      }
    },
    onmouseover () {
      this.textShow = true
      this.flag ? this.text = '收起' : this.text = '展开更多'
    },
    onmouseout () {
      this.textShow = false
    },
    // 获取组件名称
    getComponentsName () {
      this.$axios.get('api/component/getComponentList').then((res) => {
        this.componentsName = res.data.data
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.searchContent {
  width: 100%;
  padding: 26px 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .searchArea-max {
    width: 100%;
  }
  .searchArea {
    width: 85%;
  }
  .btnContent {
    width: 15%;
    padding-top: 26px;
  }
  .searchInput {
    display: flex;
    flex-wrap: wrap;
    min-height: 83px;
    height: 83px;
    overflow: hidden;
    transition: height 0.5s ease;
    .item {
      width: 30%;
      margin: 0 20px 20px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .item-label {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      .item-input {
        margin-top: 12px;
        width: 100%;
        min-height: 32px;
        box-sizing: border-box;
        padding-right: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        & /deep/ .el-select,
        .el-cascader,
        .el-date-editor.el-input {
          width: 100%;
          margin-left: 0 !important;
        }
        & /deep/ .el-radio-group {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          .el-radio {
            padding-right: 10px;
          }
          .el-radio + .el-radio {
            margin-left: 0;
          }
        }
        & /deep/ .el-checkbox-group {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          .el-checkbox {
            padding-right: 10px;
          }
          .el-checkbox + .el-checkbox {
            margin-left: 0;
          }
        }
      }
    }
  }
  .showMore {
    width: 100%;
    min-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #dcdfe6;
    .text {
      color: #409eff;
      font-size: 14px;
    }
    .el-icon-caret-bottom,
    .el-icon-caret-top {
      color: #dcdfe6;
      font-size: 20px;
    }
    .blue {
      color: #409eff;
    }
    .gray {
      color: #dcdfe6;
    }
  }
}
.searchContent2 {
  .searchArea-max {
    width: 60%;
    margin: 0 auto;
    .item {
      display: flex;
      margin-bottom: 32px;
      .item-label {
        width: 106px;
        line-height: 32px;
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      .item-input {
        width: calc(100% - 106px);
        & /deep/ .el-select,
        .el-cascader,
        .el-date-editor.el-input {
          width: 100%;
          margin-left: 0 !important;
        }
        & /deep/ .el-radio-group {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          .el-radio {
            padding-right: 10px;
          }
          .el-radio + .el-radio {
            margin-left: 0;
          }
        }
        & /deep/ .el-checkbox-group {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          .el-checkbox {
            padding-right: 10px;
          }
          .el-checkbox + .el-checkbox {
            margin-left: 0;
          }
        }
        & /deep/ .el-range-editor.el-input__inner {
          width: 100%;
        }
        & /deep/ .quill-editor {
          height: 300px;
          .ql-container {
            height: calc(100% - 90px);
          }
        }
      }
    }
  }
}
</style>
